import { Canvas, Chart, Interval, Legend } from "@antv/f2";
import { BOX10_NAME } from "../../constants/index";
import styles from "./boxs.css";
import { useEffect } from "react";

export function Box10({ hasTitle = true }) {
  const family_doctor = [
    { reg_name: "线下住院患者", num: 130, ratio: 1 },
    { reg_name: "上转住院患者", num: 140, ratio: 1 },
    { reg_name: "下转治疗患者", num: 130, ratio: 1 }
  ];
  useEffect(() => {
    const context = document.getElementById("Box10")?.getContext("2d");
    if (!context) return
    const { offsetHeight, offsetWidth } = context.canvas;
    const { props } = (
      <Canvas context={context} pixelRatio={window.devicePixelRatio}>
        <Chart
          data={family_doctor}
          coord={{
            type: "polar",
            transposed: true,
            innerRadius: 0.7,
          }}
        >
          <group
            style={{
              x: offsetWidth / 2,
              y: offsetHeight / 2 - 22
            }}
          >
            <text
              style={{
                textAlign: "center",
                fill: "#deffff",
                text: "总人数:",
                fontSize: 8,
              }}
            />
            <text
              style={{
                textAlign: "center",
                y: "30px",
                fill: "#deffff",
                text: "495人",
                fontSize: 8,
              }}
            />
          </group>

          <Interval
            x="ratio"
            y="num"
            adjust="stack"
            color={{
              field: "reg_name",
              range: [
                "#00c6ff",
                "#0278e7",
                "#695cff"
              ],
            }}
          />
          <Legend
            position="bottom"
            itemStyle={{
              width: offsetWidth / 2 - 20,
              height: 10
            }}
            nameStyle={{
              fontSize: 10
            }}
          />
        </Chart>
      </Canvas>
    );
    const chart = new Canvas(props);
    chart.render();
  }, []);
  return (
    <div className={styles.box}>
      {hasTitle && <div className={styles.title}>{BOX10_NAME}</div>}
      <canvas className={styles.main} id="Box10"></canvas>
    </div>
  );
}
